import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import Ajax from 'lib/Ajax'
import { addConfig } from 'actions/config'

const Option = Select.Option;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
     rowdata: {},
     loading: false
    }
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.props.form.resetFields();
    }else if(!this.props.visible){
      if(nextProps.rowdata.registerId&&(!this.props.rowdata.registerId||this.props.rowdata.registerId != nextProps.rowdata.registerId)&&nextProps.type != 'rFail'){
        this.setState({
          loading: true
        });
        this.loadCitizen(nextProps.rowdata.registerId);
      }
    }
  }

  loadCitizen = (id)=>{
    var self = this;
    Ajax({
      url: '/projectRegister/getCitizen',
      data: {
        registerId: id
      },
      success: function(data){
        self.setState({
          loading: false,
          rowdata: data,
        });
      },
      error: function(error){
        message.error(error);
      }
    });
  }

  handleCommit = () => {
    var self = this;
    if(this.props.see){
      this.props.onCancel();
    }else{
      self.props.form.validateFields((err, values) => {
        if(err == null&&!this.state.loading){
          self.setState({
            loading: true
          });
          const { rowdata  } = self.state;
          _.each(rowdata.projectExtensionDetailList, (item)=>{
            item.extContent = values['input-'+item.extId]
          })
          rowdata.subsidyMoney = values.subsidyMoney;
          Ajax({
            url: '/projectRegister/saveCitizen',
            data: rowdata,
            success: function(data){
              self.setState({
                loading: false
              });
              message.success("修改成功");
              self.props.onSuccess(data);
            },
            error: function(error){
              message.error(error);
            }
          });
        }
      });
    }
  }

  onCancel = ()=>{
    this.setState({
      loading: false
    });
    this.props.onCancel();
  }

  validatorMon = (rule, value, callback)=>{
    if(_.isNaN(_.toNumber(value))){
      callback('请输入数字')
    }else{
      callback()
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    var { visible, type, rowdata } = this.props;
    const { bankCode } = this.props.config;
    var projectExtensionDetailList = this.state.rowdata.projectExtensionDetailList||[];
    if(this.props.type == 'rFail'){
      rowdata = this.props.rowdata;
      projectExtensionDetailList = this.props.rowdata.projectExtensionDetailList||[];
    }
    return (<Modal 
              title="修改用户信息"
              visible={visible}
              onOk={ this.handleCommit } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
              width="720px"
            >
              <Spin spinning={this.state.loading}>
                <Form
                  horizontal
                >
                  <Row gutter={20}>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="姓名">
                        { rowdata.name }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="身份证">
                        { rowdata.identNumber }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="银行卡号">
                        { rowdata.bankNumber }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="金额">
                        {getFieldDecorator('subsidyMoney',{
                          initialValue: rowdata.subsidyMoney||0,
                          rules: [{ validator: this.validatorMon}]
                        })(
                          <Input disabled={this.props.see}/>
                        )}
                      </FormItem>
                    </Col>
                    {
                      projectExtensionDetailList.map((item)=>{
                        return (
                          <Col span={8} key={item.extId}>
                            <FormItem {...formItemLayout} label={ item.extName }>
                              {getFieldDecorator('input-'+item.extId,{
                                initialValue: item.extContent||""
                              })(
                                <Input disabled={this.props.see}/>
                              )}
                            </FormItem>
                          </Col>
                        )
                      })
                    }
                  </Row>
                </Form>
              </Spin>
            </Modal>);
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(Edit))